<template>
    <div class="status-box">
        <span class="status-tag" v-if="name" :style="{ '--status-bgcolor': statusColor }">{{ name }}</span>
        <ZwTooltip
            v-if="rejectVisible"
            type="icon"
            :tooltipMaxWidth="400"
            :iconStyle="{ marginLeft: 0, marginRight: '8px' }">
            <template #content>
                <div v-html="rejectVisible"></div>
            </template>
        </ZwTooltip>
        <span class="jump-btn" v-if="routerName" @click="jumpTo">{{ routerName }}</span>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import ZwTooltip from '@/components/ZwTooltip.vue';

const router = useRouter();

// type-tag类型，默认账户，'Merchant'为商户,
const props = defineProps(['type', 'info', 'openNo', 'id']);

// 状态名称
const name = computed(() => {
    if (props?.info?.status_name === '认证完成') {
        return '已认证';
    } else {
        return props?.info?.status_name;
    }
});
// 状态颜色
const colors = computed(() => {
    if (props.type === 'merchant') {
        // 状态值
        // 报备状态：10.待报备 20.报备中 30.已报备 40.报备失败 50.认证申请中 55 申请失败 60.审核中 65.审核失败 70.待认证 80.认证完成
        return {
            10: '#CCCCCC',
            20: '#3E82F9',
            30: '#60B900',
            40: '#F53F3F',
            50: '#3E82F9',
            55: '#F53F3F',
            60: '#FFAC14',
            65: '#F53F3F',
            70: '#D059DD',
            80: '#60B900'
        };
    }
    //开户状态 10.待审核 15.待绑卡 20.待签约 30.已开通 40.被驳回
    return {
        10: '#CCCCCC',
        15: '#D059DD',
        20: '#D059DD',
        30: '#60B900',
        40: '#F53F3F'
    };
});
const statusColor = computed(() => {
    return colors.value[props?.info?.status];
});

// 失败/驳回原因
const rejectReason = computed(() => {
    const reason = props?.info?.reject_reason;
    if (!reason || !reason?.length) {
        return null;
    }
    // 只有一条数据的时候不显示序号
    if (reason.length === 1) {
        return reason.map(item => `${item}`).join('');
    }
    // replace(/。?$/, '。')是否加句号
    return reason.map((item, index) => `${index + 1}. ${item}`).join('<br>');
});
const rejectVisible = computed(() => {
    const status = props?.info?.status;
    if (props.type === 'merchant' && [65, 40, 55].includes(status)) {
        return rejectReason.value;
    }
    if (props.type !== 'merchant' && [40].includes(status)) {
        return rejectReason.value;
    }
    return false;
});

// 跳转按钮名称
const routerName = computed(() => {
    if (props.type === 'merchant' && props?.info?.status == 70) {
        return '去认证';
    }
    if (props.type !== 'merchant' && props?.info?.status == 20) {
        return '去签约';
    }
    if (props.type !== 'merchant' && props?.info?.status == 15) {
        return '去绑卡';
    }
    return null;
});
// 跳转到对应页面，认证和签约页面
const jumpTo = () => {
    let path = '/pay/account/signature';
    if (routerName.value === '去认证') {
        path = '/pay/account/authentication';
    }
    if (routerName.value === '去绑卡') {
        onJumpToBind();
        return;
    }
    router.push({
        path,
        query: {
            isp_code: props?.info?.isp_code, //服务商CODE
            merchant_no_type: routerName.value === '去签约' ? 1 : props?.info?.merchant_no_type, //商户号类型 1.商户号（各服务商进件成功后生成的商户号） 2.微信商户号 3.支付宝商户号
            open_no: props?.openNo, // // 后端传顶层开户号（客易达生成）
            isp_code_name: props?.info?.isp_code_name, // 服务商
            merchant_no: props?.info?.merchant_no
        }
    });
};

/**
 * 调整到绑卡页面
 */
const onJumpToBind = () => {
    router.push({
        path: '/pay/account/bind',
        query: {
            id: props.id
        }
    });
};
</script>

<style lang="scss" scoped>
.status-box {
    display: inline-flex;
    align-items: center;
    .status-tag {
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        padding: 0 6px;
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        margin: 0 8px;
        background-color: var(--status-bgcolor);
    }
    .jump-btn {
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        color: #ff6b00;
    }
}
</style>
